/*------------------------------------------------*/
/*	Page: Inbox
/*------------------------------------------------*/

.inbox {
	.searchbox {
		margin-bottom: 10px;
		width: 45em;
		padding-left: 4.8em;

		@include max-screen($break-large) {
			width: auto;
			padding-left: initial;
		}
	}

	.top {
		.row {
			> div:first-child {
				padding-right: 0;

				@include max-screen($break-large) {
					padding-right: 15px;
				}
			}
		}
	}

	.top-menu {
		padding-left: 21px;
		border-left: 1px solid $line-color;

		@include max-screen($break-large - 1px) {
			padding-left: 0;
			border-left: none;
			margin-top: 10px;
		}

		.top-menu-label {
			margin-right: 5px;
		}
		
		> ul,
		.simple-checkbox-all {
			@include inline-block;
		}

		> ul {
			margin-right: 10px;

			> li {
				padding-left: 0;
				padding-right: 0;
			}
		}

		.btn {
			background-color: #e4e4e4;
			color: darken(#e4e4e4, 45%);
			font-size: 0.85em;

			&:hover {
				color: darken(#e4e4e4, 65%);
			}

			&:active, &.active,
			&:focus, &.focus {
				@include box-shadow(none);

				outline: none;
			}
		}

		.btn-group.open {
			.dropdown-toggle {
				@include box-shadow(none);
			}
		}

		ul.dropdown-menu {
			li {
				font-size: 0.9em;

				a {
					color: darken(#e4e4e4, 45%);
					padding: 3px 11px;
				}
			}
		}

		.navigation {
			position: absolute;
			top: -6px;
			right: 0;

			.inbox-nav-toggle {
				font-size: 22px;
				position: relative;
				top: 9px;
				float: left;
			}

			@include max-screen($break-small) {
				display: block;
				position: initial;
				
				.pager-wrapper {
					float: right;
				}
			}

			.info {
				position: relative;
				top: 2px;
				right: 15px;
				font-size: 0.85em;
			}

			ul.pager {
				@include inline-block;
				
				margin: 0;
				position: relative;
				right: 8px;

				@include max-screen($break-small) {
					position: initial;
				}

				li {
					font-size: 24px;

					a {
						color: darken(#e4e4e4, 45%);
						padding: 5px 7px;

						&:hover {
							color: darken(#e4e4e4, 65%);
						}
					}
				}
			}
		}
	}

	.bottom {
		border-top: 1px solid $line-color;

		.row {
			> .inbox-left-menu {
				padding-right: 0;
				padding-top: 14px;

				@include max-screen($break-small) {
					display: none;
					padding-right: 15px;
				}
			}

			.messages {
				border-left: 1px solid $line-color;
				padding-left: 15px;
				padding-top: 10px;

				@include max-screen($break-medium) {
					border-left: none;
					padding-left: 0;
				}
			}
		}

		ul.left-menu {
			margin-bottom: 40px;

			li {
				a {
					display: block;
					color: lighten($base-font-color-dark, 20%);
					padding: 5px 0px;
					font-size: 0.9em;

					&:hover {
						color: $base-font-color-dark;
						text-decoration: none;
					}
				}

				i {
					width: 15px;
					margin-right: 5px;
				}

				.badge {
					background-color: #a2a2aa2;
					color: $widget-bg-color;
				}
			}
		}
	}

	.labels {
		h3 {
			font-size: 1em;
		}

		li {
			a {
				font-size: 0.9em;
				color: lighten($base-font-color-dark, 20%);

				&:hover {
					color: $base-font-color-dark;
					text-decoration: none;
				}
			}

			i {
				width: 14px;
				height: 14px;
				position: relative;
				top: 2px;
			}
		}
	}

	.message-label {
		padding: 3px;
		font-size: 0.8em;
		font-family: $secondary-font-family-bold;
		color: #fff !important;

		@include max-screen($break-medium) {
			display: none;
		}
	}

	.label1 {
		color: #97DD03;
		background-color: #97DD03;
	}

	.label2 {
		color: #03CCDD;
		background-color: #03CCDD;
	}

	.label3 {
		color: #DD4003;
		background-color: #DD4003;
	}

	table.message-table {
		table-layout: fixed;

		@include max-screen($break-medium) {
			display: block;
		}

		colgroup {
			.col-check {
				width: 25px;
			}

			.col-star {
				width: 25px;
			}
			
			.col-from {
				width: 140px;
			}

			.col-attachment {
				width: 50px;
			}

			.col-timestamp {
				width: 70px;
			}

			@include max-screen($break-medium) {
				.col-from,
				.col-blank, .col-timestamp {
					width: auto;
				}
			}
		}

		tr {
			cursor: pointer;
			border-bottom: 1px solid $body-bg-color;

			.simple-checkbox {
				@include inline-block;

				position: relative;
				top: 3px;

				input[type="checkbox"] + label {
					margin-right: 0;
					padding-left: 0;

					&:before {
						background-color: #fff;
					}
				}
			}

			&.unread {
				font-weight: 700;
				background-color: #fcfcfc;

				.icon-attachment i {
					color: initial;
				}
			}

			&.highlighted {
				background-color: #FFFEED;
			}

			td {
				color: $base-font-color-dark;
				font-size: 0.9em;
				white-space: nowrap;
				overflow: hidden;

				&:nth-child(3),
				&:nth-child(4) {
					@include max-screen($break-medium) {
						display: block;
						white-space: normal;
						overflow: visible;
					}
				}

				&:hover {
					text-decoration: none;
				}

				i {
					font-size: 17px;
					position: relative;
					top: 2px;
					color: #ccc;

					&.fa-star {
						color: $the-yellow;
					}
				}

				.from {
					@include inline-block;

					
					margin-right: 20px;
				}

				.preview {
					font-weight: normal;
					color: #aaa;
				}

				.timestamp {
					@include inline-block;

					float: right;
				}
			}
		}
	}
}